<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="8">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                        <Card>
                            <Row type="flex" class="user-infor">
                                <Col span="8">
                                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                                        <img class="avator-img" :src="user.avatar" />
                                    </Row>
                                </Col>
                                <Col span="16" style="padding-left:6px;">
                                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                                        <div>
                                            <b class="card-user-infor-name">{{user.realname}}</b>
                                            <p>{{user.locked}}</p>
                                        </div>
                                    </Row>
                                </Col>
                            </Row>
                            <!-- <div class="line-gray"></div>
                            <Row class="margin-top-8">
                                <Col span="8"><p class="notwrap">上次登录时间:</p></Col>
                                <Col span="16" class="padding-left-8">2017.09.12-13:32:20</Col>
                            </Row>
                            <Row class="margin-top-8">
                                <Col span="8"><p class="notwrap">上次登录地点:</p></Col>
                                <Col span="16" class="padding-left-8">北京</Col>
                            </Row> -->
                        </Card>
                    </Col>
                    <Col :md="14" :lg="24" :style="{marginBottom: '10px'}">
                        <Card>
                            <p slot="title" class="card-title">
                                <Icon type="android-checkbox-outline"></Icon>
                                每日积分发放设置
                            </p>
                            <Form label-position="left" :label-width="100">
                                <FormItem label="地区：">
                                    <Select v-model="curCity" filterable @on-change="getAreaBp">
                                        <Option v-for="item in cityData" :value="item.areaId" :key="item.areaId">{{ item.name }}</Option>
                                    </Select>
                                </FormItem>
                                <Input v-model="item.backBp" v-for= "item in areaBpData">
                                    <span slot="prepend">{{ item.memberName }}</span>
                                    <Button :loading="bpLoading" slot="append" @click="handleUpBp(item)"> 修改 </Button>
                                </Input>
                            </Form>
                            <Spin size="large" fix v-if="areaLoading"></Spin>
                        </Card>
                    </Col>
                </Row>
            </Col>
            <Col :md="24" :lg="16">
                <Row :gutter="5">
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="user_created_count"
                            :end-val="lxSystemInfo.totalDayMember"
                            iconType="android-person-add"
                            color="#2d8cf0"
                            intro-text="今日新增会员"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="visit_count"
                            :end-val="lxSystemInfo.totalMember"
                            iconType="ios-eye"
                            color="#64d572"
                            :iconSize="50"
                            intro-text="历史会员总数"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="transfer_count"
                            :end-val="lxSystemInfo.totalDayConsume"
                            iconType="shuffle"
                            color="#f25e43"
                            intro-text="今日消费累计"
                        ></infor-card>
                    </Col>
                    <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                        <infor-card
                            id-name="collection_count"
                            :end-val="lxSystemInfo.totalConsume"
                            iconType="upload"
                            color="#ffd572"
                            intro-text="历史消费累计"
                        ></infor-card>
                    </Col>
                </Row>
                <Row>
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <Icon type="map"></Icon>
                            会员分布
                        </p>
                        <div class="map-con">
                            <Col span="24">
                                <map-data-table :cityData="cityData" height="281" :style-obj="{margin: '12px 0 0 11px'}"></map-data-table>
                            </Col>
                            <!-- <Col span="14" class="map-incon">
                                <Row type="flex" justify="center" align="middle">
                                    <home-map :city-data="cityData"></home-map>
                                </Row>
                            </Col> -->
                        </div>
                    </Card>
                </Row>
            </Col>
        </Row>

    </div>
</template>

<script>
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';
import Cookies from 'js-cookie';
import {
  getLxSystemInfo
} from 'api/lx/lxsystem/super';
import {
  getAreaMemberBpAll,
  putAreaMemberBp
} from 'api/lx/lxsystem/areabp';
getAreaMemberBpAll
export default {
    name: 'home',
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem
    },
    data () {
        return {
          loading: false,
          areaLoading: false,
          bpLoading: false,
          lxSystemInfo: {
            totalConsume: 0,
            totalDayMember: 0,
            totalDayConsume: 0,
            totalMember: 0
          },
          curCity: 25,
          cityData: cityData,
          areaBpData:[]
        };
    },
    computed: {
      user () {
          return JSON.parse(Cookies.get('user'));
      }
    },
    methods: {
        getAreaBp () {
          this.areaLoading = true;
          getAreaMemberBpAll({area_id: this.curCity}).then(data => {
              this.areaLoading = false;
              if (data.status === 200) {
                this.areaBpData = data.data;
              } else {
                  this.$Message.error(data.message);
              }
          }).catch(error => {
              this.areaLoading = false;
              this.$Message.error('服务器异常' + error);
          });
        },
        handleUpBp (item) {
          this.bpLoading = true;
          putAreaMemberBp(item).then(data => {
              this.bpLoading = false;
              if (data.status === 200) {
                this.$Message.success('修改成功！');
              } else {
                this.$Message.error(data.message);
              }
          }).catch(error => {
              this.areaLoading = false;
              this.$Message.error('服务器异常' + error);
          })
        }
    },
    created () {
      getLxSystemInfo().then(data => {
          this.loading = false;
          if (data.status === 200) {
            this.lxSystemInfo = data.data;
          } else {
              this.$Message.error(data.message);
          }
      }).catch(error => {
          this.loading = false;
          this.$Message.error('服务器异常' + error);
      });
      this.getAreaBp();
    }
};
</script>
